<template>
    <div class="news-carousel">
      <el-carousel :interval="4000" type="card" height="200px" class="carousel">
        <el-carousel-item
          v-for="(item, index) in announcements"
          :key="item.id"
        >
          <div
            class="carousel-item"
            :style="{ backgroundImage: `url(${item.img})` }"  
          >
            <h3>{{ item.title }}</h3>
          </div>
        </el-carousel-item>
      </el-carousel>
  
      <div class="title-bar">
        <h3 v-for="(item, index) in announcements" :key="item.id">
          {{ item.title }}
        </h3>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { noticeListService } from '@/api/announcement.js';
  
  const announcements = ref([]);
  
  const fetchAnnouncements = async () => {
    try {
      const response = await noticeListService();
      announcements.value = response.data.slice(0, 5); // 提取前五个公告
      console.log('公告列表:', announcements.value); // Console 输出公告列表
    } catch (error) {
      console.error('获取公告失败:', error);
    }
  };
  
  onMounted(() => {
    fetchAnnouncements();
  });
  </script>
  
  <style scoped>
  .news-carousel {
    display: flex;
    flex-direction: column;
    height: 200px; /* 与轮播器的高度一致 */
  }
  
  .carousel {
    flex: 1; /* 轮播器自适应高度 */
    position: relative;
  }
  
  .carousel-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px; /* 确保轮播项高度统一 */
    background-color: red; /* 默认背景色 */
    background-size: cover; /* 背景图像覆盖 */
    background-position: center;
    color: white; /* 字体颜色 */
    text-align: center;
  }
  
  .title-bar {
    background-color: #f5f5f5;
    padding: 10px;
  }
  
  .title-bar h3 {
    margin: 5px 0;
    color: #333; /* 标题颜色 */
  }
  </style>
  